<template>
	<view class="content">
		<u-datetime-picker :show="showStart" v-model="timeStamp" closeOnClickOverlay mode="date" @confirm="confirmStart"
			@cancel="showStart = false" @close="showStart = false">
		</u-datetime-picker>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
			<view class="section">
				<view class="section-bdoy">
					<view class="section-1">
						<view class="form">
							<view class="form-item" v-if="id==1||id==2">
								<view class="label">批次编号</view>
								<view class="shape"></view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body"
										v-model="form.number"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">{{id==4?'计划名称':'采购名称'}}</view>
								<view class="shape"></view>
								<view class="input">
<!-- 									<u--input v-if='id!==4' placeholderClass="input-placeholder" class="input-body"
										v-model="form.project_name"></u--input> -->
										<u--input  placeholderClass="input-placeholder" class="input-body"
											v-model="form.name"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">申报时间</view>
								<view class="shape"></view>
								<view class="input">
									<div class="time-body" @click="showDate('start_time')">{{form.start_time}}</div>
								</view>
							</view>
							<view class="actions">
								<view class="action" @click="handleResetForm()">
									<text>重</text>
									<text>置</text>
								</view>
								<view class="action search" @click="handleSearch()">
									<text>查</text>
									<text>询</text>
								</view>
							</view>
						</view>
						<view class="list">
							<view class="" v-if="id==1||id==2">
								<view class="listItme" v-for="item in expandList" :key='item.id'>
									<view class="itmeone">
										采购项目名称：{{item.project_name}}
									</view>
									<text class="itme itmetwo">
										{{item.name}}
									</text>
									<view class="itme itmetherr">
										批次编号：{{item.number}}
									</view>
									<view class="itme itmefore">
										<view class="itmes">
											申报开始时间：{{item.start_time ? item.start_time.substring(0, 10):"--"}}
										</view>
										<view class="itmess">
											申报截止时间：{{item.end_time ? item.end_time.substring(0, 10):"--"}}
										</view>
									</view>
									<view class="itme itmefore">
										<view class="itmes">
											公告发布时间：{{item.notice_time ? item.notice_time.substring(0, 10):"--"}}
										</view>
										<view class="itmess">
											拟定开标时间：{{item.bid_open_time ?item.bid_open_time.substring(0, 10):"--"}}
										</view>
									</view>
								</view>
							</view>
							<view class="listItme" v-if="id==3" v-for="item in expandList" :key='item.id'>
								<view class="Provincial">
									<view class="Provincialleft">
										批次名称：<text class="Provincialright">
										{{item.pc_name}}
									</text>
									</view>
									
								</view>
								<view class="recruitment" v-for="age in item.children" :key='age.id' @click="go(age.id)">
									<view class="text">
										{{age.name}}
									</view>
									<view class="image" >
										<image class="img" src="../../../../src/imgs/account-icon-right.png" mode="">
										</image>
									</view>
								</view>
							</view>
							<view class="listItme" v-if="id==4" v-for="item in expandList">
								<view class="Plan">
									<view class="Planname">
										招标计划名称：<text class="Planchild">
										{{item.name}}
									</text>
									</view>
									
								</view>
								<view class="itme itmefore">
									<view class="itmes">
										申报开始时间：{{item.start_time ? item.start_time.substring(0, 10):"--"}}
									</view>
									<view class="itmess">
										申报截止时间：{{item.end_time ? item.end_time.substring(0, 10):"--"}}
									</view>
								</view>
								<view class="itme itmefore">
									<view class="itmes">
										发布公告时间：{{item.notice_time ? item.notice_time.substring(0, 10):"--"}}
									</view>
									<view class="itmess">
										拟定开标时间：{{item.bid_open_time ? item.bid_open_time.substring(0, 10):"--"}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 				<view v-else class="custom-empty">
					<text class="iconfont icon-zanwushuju"></text>
					<view class="empty-title">暂无数据</view>
				</view> -->
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		procurementlist,
		ProvincialBidding
	} from '@/api/procurement.js'
	// import {
	// 	mapGetters,
	// 	mapActions
	// } from 'vuex';
	// import formArea from '@/components/form_area/index.vue';
	export default {

		data() {
			return {
				form: {
					project_name: '', //采购名称
					number: '', //批次名称
					start_time: '', //申报时间
					name:''//授权采购的计划名称字段
				},
				id: 1, //招标采购
				city: '',
				name: '',
				list: {}, //
				expandList: [], //国招省招数据
				analysis: {},
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				showStart: false,
				timeStamp: '',
				curBoard: 1,
				curd: 0,
				curIdx: 0,
				curType: 1,
			};
		},
		methods: {
			// setCurIdx(idx, type) {
			// 	this.curIdx = idx;
			// 	this.curType = type;
			// 	this.projectAnalysis()
			// 	// this.handleResetForm();
			// },
			// setCurBoard(item) {
			// 	if (!item.state) return;
			// 	this.curBoard = item.state;
			// 	this.mescroll.resetUpScroll();
			// 	this.mescroll.scrollTo(0, 0);
			// },
			showDate(type) {
				this.timeType = type;
				this.showStart = true;
			},
			closeDate(type) {
				this.timeType = '';
				this.showStart = false;
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				const h = date.getHours() + ':';
				const m = date.getMinutes() + ':';
				const s = date.getSeconds();
				return Y + M + D;
			},
			confirmStart(val) {
				const timeStamp = val.value;
				this.form[this.timeType] = this.formatDate(timeStamp);
				this.closeDate();
			},
			async procurementlist(idx, project_id) {
				uni.showLoading({
					title: '加载中...'
				});
				//国标省标
				if (this.id == 1 || this.id == 2) {
					const {data} = await procurementlist({
						bidding_id: this.id,
						number: this.form.number,
						name: this.form.name,
						bidding_time: this.form.start_time
					});
					console.log(data.data.data,'查看数据')
					console.log(data,'查看数据')
					if (data.code === 1) {
						this.expandList = data.data.data
					}
					console.log(this.expandList)
					//省招批次
				} else if (this.id == 3) {
					const {
						data
					} = await ProvincialBidding({
						bidding_id: this.id,
						number: this.form.number,
						name: this.form.name,
						bidding_time: this.form.start_time
					});
					console.log(data,'查看数据')
					// if (data.code === 1) {
					// 	this.expandList = data.data.data
					// }
					console.log(this.expandList)
					//授权采购
				} else {
					const {
						data
					} = await procurementlist({
						bidding_id: this.id,
						name: this.form.name,
						bidding_time: this.form.start_time
					});
					if (data.code === 1) {
						this.expandList = data.data.data
					}
				}
				uni.hideLoading();
			},
			go(id) {
				// let obj = {
				// 	id: params.id,
				// 	project_name: params.project_name,
				// 	curd: this.curd
				// }
				uni.navigateTo({
					url: '/pages/work/manager/procurement/Batchdetails?params= ' + JSON.stringify(id)
				})
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				// let obj = {
				// 	...this.form
				// }

				// if (this.curBoard !== 0) {
				// 	obj.state = this.curBoard
				// }
				// const {
				// 	data
				// } = await projectRiskApi({
				// 	...obj,
				// 	page: page.num,
				// 	pageSize: this.pageSize,
				// });
				// this.procurementlist()
				var a = null
				if (this.id == 1 || this.id == 2) {
					const {
						data
					} = await procurementlist({
						bidding_id: this.id,
						number: this.form.number,
						name: this.form.name,
						bidding_time: this.form.start_time
					});
					a = data
				} else if (this.id == 3) {
					const {
						data
					} = await ProvincialBidding({
						bidding_id: this.id,
						number: this.form.number,
						name: this.form.name,
						bidding_time: this.form.start_time
					});
					a = data
				} else {
					const {
						data
					} = await procurementlist({
						bidding_id: this.id,
						name: this.form.name,
						bidding_time: this.form.start_time
					});
					a = data
				}
				if (a.code === 1 || a.code === 200) {
					let arr = [];
					for (let key in a.data.data) {
						arr.push(a.data.data[key]);
					}
					// 接口返回的当前页数据列表 (数组)
					let curPageData = arr;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = a.data.last_page;
					//设置列表数据
					// if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
					// this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage);
					this.mescroll.endByPage(curPageLen);
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen);
					}, 20);
				} else {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
			handleResetForm() {
				// for (let key in this.form) {
				// 	this.form[key] = '';
				// }
				this.form.project_name = ''
				this.form.start_time = ''
				this.form.number = ''
				this.form.name=''
				this.procurementlist()
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
			handleSearch() {
				// this.curBoard = this.curBoard;
				// if (this.form.city == '全部') {
				// 	this.form.city = ''
				// 	this.city = '全部'
				// }
				this.procurementlist();
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
		},
		onReady() {
			this.timeStamp = (new Date()).valueOf();
			// this.projectAnalysis();
			// this.fetchData();
		},
		onLoad(data) {
			this.id = JSON.parse(data.params)
			switch (this.id) {
				case 1:
					uni.setNavigationBarTitle({
						title: '国 招 物 资'
					});
					break;
				case 2:
					uni.setNavigationBarTitle({
						title: '省 招 物 资'
					});
					break;
				case 3:
					uni.setNavigationBarTitle({
						title: '省 招 服 务'
					});
					break;
				default:
					uni.setNavigationBarTitle({
						title: '授 权 采 购'
					});
					break
			}
			this.procurementlist()
			this.upCallback()
			// this.form.type = data.type;
			// this.curd = data.curd ? data.curd : 0;
		}
	}
</script>

<style lang="scss" scoped>
	.custom-empty {
		position: static;
	}

	.content {
		background-color: #fff;
	}

	.section {
		background-color: #2c5cff;

		.section-bdoy {
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
		}


	}

	.section-1 {
		position: relative;
		width: 100%;
		top: -50rpx;
		z-index: 10;
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		font-size: 30rpx;
		.list {
			padding: 10rpx 40rpx 0 40rpx;

			.listItme {
				border-radius: 30rpx;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				padding: 25rpx 30rpx;
				margin-top: 25rpx;
				.itmeone {
					margin-bottom: 20rpx;
					font-weight: 700;
					color: #3b3c40;
				}

				.itme {
					font-size: 20rpx;
					color: #3B3C40;
					padding-bottom: 20rpx;
				}
				.itmetwo {
					border-bottom: 1rpx solid #F2F2F0;
				}
				.itmetherr {
					margin-top: 20rpx;
				}

				.itmefore {
					display: flex;
					.itmes {
						flex: 50%;
					}
				}

				.image {
					width: 20rpx;
					height: 30rpx;

					.img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}

				.Provincial {
					display: flex;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #F2F2F0;
					color: #3B3C40;
					font-weight: 700;

					.Provincialleft {
						flex: 1;
					}
					// .Provincialright{
					// 	overflow: hidden;
					// 	text-overflow:ellipsis;
					// 	white-space: nowrap;
					// }
				}

				.recruitment {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;
					.text{
						font-size: 20rpx;
						font-weight: normal;
					    color: #3B3C40;
					}
				}
				.Plan{
					width: 100%;
					padding-bottom: 15rpx;
					border-bottom: 1px solid #f2f2f0;
					display: flex;
					margin-bottom: 20rpx;
					.Planname{
						flex: 30%;
						font-weight: 700;
						color: #3B3C40;
					}
					.Planchild{
						flex: 60%;
					}
				}
			}
		}

		.actions {
			width: 100%;
			height: 50rpx;
			margin-top: 29rpx;
			// padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;

			.action {
				width: 288rpx;
				height: 48rpx;
				background-color: #395cf5;
				border-radius: 20rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 48rpx;
				color: #ffffff;

				text {
					&:first-child {
						margin-right: 20rpx;
					}
				}
			}

			.search {
				background-color: #1534ce;
			}
		}

		.form {
			width: 100%;
			padding: 0 75rpx;
			padding-top: 100rpx;
			box-sizing: border-box;

			.form-item {
				width: 600rpx;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				margin-bottom: 34rpx;
				@include clear();

				.label {
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}

				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}

				.input {
					height: 100%;
					float: left;
					width: calc(100% - 134rpx - 3rpx);

					.time-body {
						height: 48rpx;
						width: 45%;
						float: left;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
						text-align: center;
						line-height: 48rpx;
					}

					.time-split {
						float: left;
						width: 10%;
						text-align: center;
						color: #1534ce;
					}

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
		}
	}

	.section-0 {
		width: 100%;
		background-color: #2e5efe;

		.section-body {
			width: 100%;
			// height: 340rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
			padding-bottom: 50rpx;
			padding-top: 20rpx;
			background-color: #1534ce;
			background-size: cover;
			background-repeat: no-repeat;
			// border-top-left-radius: 50rpx;
			// border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;

			.item {
				width: 33.33%;
				float: left;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
				height: 100rpx;
				position: relative;
				padding-top: 20rpx;
				padding-bottom: 20rpx;

				.shape {
					width: 4rpx;
					height: 84rpx;
					background-image: linear-gradient(rgba(#3658f2, 0.3) 0%, #3658f2 30%, #3658f2 70%, rgba(#3658f2, 0.3) 100%, );
					position: absolute;
					right: 0;
					top: 28rpx;
				}

				.shape2 {
					height: 4rpx;
					width: 172rpx;
					background-image: linear-gradient(90deg, rgba(#3658f2, 0.3) 0%, #3658f2 30%, #3658f2 70%, rgba(#3658f2, 0.3) 100%, );
					position: absolute;
					left: 0;
					right: 0;
					margin: 0 auto;
					bottom: -2rpx;
				}

				.top {
					width: 100%;
					text-align: center;
					font-size: 16rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #95c4fa;
				}

				.bottom {
					width: 100%;
					text-align: center;
					font-size: 58rpx;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #ffde00;
				}
			}

			.item__on {
				.top {
					text-shadow: 8rpx 8rpx 8rpx rgba(0, 0, 0, 0.3);
				}

				.bottom {
					text-shadow: 8rpx 8rpx 8rpx rgba(0, 0, 0, 0.3);
				}
			}
		}
	}
</style>
